<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>SignalRGB 风扇模型生成器</title>
  <style>
    canvas { border:1px solid #ccc; margin-top:10px; }
  </style>
</head>
<body>
  <h2>SignalRGB 风扇模型生成器</h2>

  <label>灯珠数: <input id="ledCount" type="number" value="8"></label><br>
  <label>宽度: <input id="width" type="number" value="15"></label><br>
  <label>高度: <input id="height" type="number" value="15"></label><br>
  <label>半径: <input id="radius" type="number" value="5"></label><br>
  <label>起始角度(度): <input id="startAngle" type="number" value="0"></label><br>
  <label>产品名: <input id="prodName" value="CustomFan"></label><br>

  <button onclick="generate()">生成模型</button>
  <button onclick="downloadJson()">导出模型</button>
  <input type="file" id="fileInput" accept=".json">
  <canvas id="preview" width="300" height="300"></canvas>

  <script>
    let jsonData = null;

    function generate() {
      const count = parseInt(document.getElementById("ledCount").value);
      const width = parseInt(document.getElementById("width").value);
      const height = parseInt(document.getElementById("height").value);
      const radius = parseFloat(document.getElementById("radius").value);
      const startAngle = parseFloat(document.getElementById("startAngle").value) * Math.PI/180;
      const prodName = document.getElementById("prodName").value;

      const cx = width/2;
      const cy = height/2;
      let coords = [];
      let names = [];
      for (let i=0; i<count; i++) {
        let theta = startAngle + (2*Math.PI*i/count);
        let x = Math.round(cx + radius * Math.cos(theta));
        let y = Math.round(cy + radius * Math.sin(theta));
        coords.push([x,y]);
        names.push("Led"+(i+1));
      }

      jsonData = {
        ProductName: prodName,
        DisplayName: prodName,
        Brand: "Custom",
        Type: "custom",
        LedCount: count,
        Width: width,
        Height: height,
        LedMapping: [...Array(count).keys()],
        LedCoordinates: coords,
        LedNames: names
      };

      drawPreview(coords, width, height);
    }

    function downloadJson() {
      if (!jsonData) return alert("请先生成模型");
      const blob = new Blob([JSON.stringify(jsonData, null, 2)], {type: "application/json"});
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = jsonData.ProductName + ".json";
      a.click();
    }

    // 导入 JSON 文件
    document.getElementById("fileInput").addEventListener("change", (e)=>{
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = function(ev) {
        try {
          const data = JSON.parse(ev.target.result);
          jsonData = data;
          // 把参数填回界面
          document.getElementById("ledCount").value = data.LedCount;
          document.getElementById("width").value = data.Width;
          document.getElementById("height").value = data.Height;
          document.getElementById("prodName").value = data.ProductName;
          drawPreview(data.LedCoordinates, data.Width, data.Height);
        } catch(err) {
          alert("解析失败: " + err);
        }
      };
      reader.readAsText(file);
    });

    // 画布预览
    function drawPreview(coords, w, h) {
      const canvas = document.getElementById("preview");
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "blue";
      coords.forEach((pt,i)=>{
        let x = pt[0] / w * canvas.width;
        let y = pt[1] / h * canvas.height;
        ctx.beginPath();
        ctx.arc(x,y,5,0,2*Math.PI);
        ctx.fill();
        ctx.fillText(i, x+6,y);
      });
    }
  </script>
</body>
</html>
